<!-- 责任书打分管理 -->
<template>
  <div>
    <div class="topDiv" ><span style="font-size: 32px;">{{zrsDfInfo.zrsKhdeptName}}-{{zrsDfInfo.zrsName}}</span> </div>

    <div class="talbeDiv">
      <div>编码： {{zrsDfInfo.zrsKhdeptCode}} <span style="padding-left: 70%;">生效日期：{{zrsDfInfo.zrsKhdate}}</span></div>
      <div v-for="zrsMbManageGoal in ZrsMbManageGoalList" style="padding-top: 5px;">
        <span>{{zrsMbManageGoal.goalName}}</span>
        <div style="padding-top: 10px;" v-if="glxZbData['glx_zblist_'+zrsMbManageGoal.mbGoalId]">
          <table class="talbeClass table-striped table-bordered table-hover" :id="'talbe_'+zrsMbManageGoal.mbGoalId" :name="'talbe_'+zrsMbManageGoal.mbGoalId">
            <thead>
            <tr style="font-size:20px;background-color: rgb(223, 223, 223);">
              <th style="width: 14%;">指标名称</th>
              <th style="width: 28%;" colspan="2">基本要求</th>
              <th style="width: 7%;">分值（分）</th>
              <th style="width: 7%;">实得分（分）</th>
              <th style="width: 10%;">扣分原因</th>
              <th style="width: 15%;">质量标准</th>
              <th style="width: 8%;">考核周期</th>
              <th style="width: 10%;">考核部门</th>
            </tr>
            </thead>
            <tbody>
              <template  v-for="(zrsGoalZbMap , index) in glxZbData['glx_zblist_'+zrsMbManageGoal.mbGoalId]">
                <template v-for="(ejzbMap , i ) in zrsGoalZbMap.erzbList">
                  <template v-if="ejzbMap.sjzbList[0].sjdfId == null"> <!-- 三级指标不存在的时候 -->
                    <template v-if="i==0">
                      <tr>
                        <td :rowspan="zrsGoalZbMap.yjrs">{{zrsGoalZbMap.yjzbmc}}<!--  一级指标名称  -->
                        </td>
                        <td :rowspan="ejzbMap.errs" colspan="2" style="text-align: left;">{{ejzbMap.erzbmc}}<!--  二级指标名称  -->
                        </td>
                        <!-- 分值 -->
                        <td v-if="zrsGoalZbMap.yjIsDfZb == '0'" :rowspan="zrsGoalZbMap.yjrs-1">{{zrsGoalZbMap.yjfz}}</td>
                        <td v-else>{{ejzbMap.erfz}}</td>

                        <td v-if="zrsGoalZbMap.yjIsDfZb == '0'" :rowspan="zrsGoalZbMap.yjrs-1">
                          {{zrsGoalZbMap.yjsdf}}<!--百分制分数 -->
                        </td>
                        <td v-else>{{ejzbMap.ersdf}}<!--百分制分数 -->
                        </td>

                        <td v-if="zrsGoalZbMap.yjIsDfZb == '0'" :rowspan="zrsGoalZbMap.yjrs-1">
                          {{zrsGoalZbMap.yjkfyy}} <!--扣分原因 -->
                        </td>
                        <td v-else>
                          {{ejzbMap.erkfyy}} <!--扣分原因 -->
                        </td>
                        <!-- 分值end -->
                        <td>{{ejzbMap.erbz}}</td><!-- 质量标准  -->
                        <td>
                          <dict-tag :options="dict.type.zrs_zb_checkdate" :value="ejzbMap.erKhzq"/>
                        </td>
                        <td :rowspan="zrsGoalZbMap.yjrs"> <!-- 考核部门设置 -->
                            <span v-for="dict in shDeptInfo">
                               <span v-if="zrsGoalZbMap.yjZrszbShDept == dict.key">{{dict.label}} </span>
                            </span>
                            <!--
                            <el-select v-model="zrsGoalZbMap.yjZrszbShDept" placeholder="选择考核部门" :disabled="isDisabled" @change="((val) => selectChangeShDept(val,zrsGoalZbMap.yjzbid))">
                              <el-option
                                v-for="dict in shDeptInfo"
                                :key="dict.key"
                                :label="dict.label"
                                :value="dict.key"
                              ></el-option>
                            </el-select> -->
                        </td>
                      </tr>
                    </template>
                    <template v-else>
                      <tr>
                        <td :rowspan="ejzbMap.errs" colspan="2" style="text-align: left;">{{ejzbMap.erzbmc}} <!--  二级指标名称  -->
                        </td>
                        <td v-if="zrsGoalZbMap.yjIsDfZb != '0'">{{ejzbMap.erfz}}</td>
                        <td v-if="zrsGoalZbMap.yjIsDfZb != '0'">
                          {{ejzbMap.ersdf}} <!--分数为百分制 -->
                        </td>
                        <td v-if="zrsGoalZbMap.yjIsDfZb != '0'">
                          {{ejzbMap.erkfyy}} <!--扣分原因 -->
                        </td>
                        <td>{{ejzbMap.erbz}}</td>
                        <td>
                          <dict-tag :options="dict.type.zrs_zb_checkdate" :value="ejzbMap.erKhzq"/>
                        </td>
                      </tr>
                    </template>
                  </template>
                <template v-else>
                  <template v-for="(sjzbMap , j ) in ejzbMap.sjzbList">  <!-- 判断三级指标是存在 -->

                      <template v-if="i == 0 && j==0 ">
                          <tr>
                            <td :rowspan="zrsGoalZbMap.yjrs">{{zrsGoalZbMap.yjzbmc}}
                            </td>
                            <td :rowspan="ejzbMap.errs" style="text-align: left; width: 13%;" >{{ejzbMap.erzbmc}}
                            </td>
                            <td style="text-align: left;">{{sjzbMap.sjzbmc}}</td>
                            <td v-if="ejzbMap.erIsDfZb == '0'" :rowspan="ejzbMap.errs">{{ejzbMap.erfz}}</td>
                            <td v-else>{{sjzbMap.sjfz}}</td>
                            <td v-if="ejzbMap.erIsDfZb == '0'" :rowspan="ejzbMap.errs">
                              {{ejzbMap.ersdf}} <!--分数为百分制 -->
                            </td>
                            <td v-else>
                              {{sjzbMap.sjsdf}} <!--分数为百分制 -->
                            </td>
                            <td v-if="ejzbMap.erIsDfZb == '0'" :rowspan="ejzbMap.errs">
                              {{ejzbMap.erkfyy}} <!--扣分原因 -->
                            </td>
                            <td v-else>
                              {{sjzbMap.sjkfyy}} <!--扣分原因 -->
                            </td>
                            <td>{{sjzbMap.sjbz}}</td>
                            <td>
                              <dict-tag :options="dict.type.zrs_zb_checkdate" :value="sjzbMap.sjKhzq"/>
                            </td>
                            <td :rowspan="zrsGoalZbMap.yjrs"> <!-- 考核部门设置 -->
                                <span v-for="dict in shDeptInfo">
                                   <span v-if="zrsGoalZbMap.yjZrszbShDept == dict.key">{{dict.label}} </span>
                                </span>
                                <!--
                                <el-select v-model="zrsGoalZbMap.yjZrszbShDept" placeholder="选择考核部门" :disabled="isDisabled" filterable @change="((val) => selectChangeShDept(val,zrsGoalZbMap.yjzbid))">
                                  <el-option
                                    v-for="dict in shDeptInfo"
                                    :key="dict.key"
                                    :label="dict.label"
                                    :value="dict.key"
                                  ></el-option>
                                </el-select>-->
                            </td>
                          </tr>
                        </template>
                        <template v-else-if="j==0">
                          <tr>
                            <td :rowspan="ejzbMap.errs" style="text-align: left;width: 13%;">{{ejzbMap.erzbmc}}<!--  二级指标名称  -->
                            </td>
                            <td style="text-align: left;">{{sjzbMap.sjzbmc}}<!--  三级指标名称  -->
                            </td>
                            <td v-if="ejzbMap.erIsDfZb == '0'" :rowspan="ejzbMap.errs">{{ejzbMap.erfz}}</td>
                            <td v-else>{{sjzbMap.sjfz}}</td>
                            <td v-if="ejzbMap.erIsDfZb == '0'" :rowspan="ejzbMap.errs">
                              {{ejzbMap.ersdf}} <!--分数为百分制 -->
                            </td>
                            <td v-else>
                              {{sjzbMap.sjsdf}} <!--分数为百分制 -->
                            </td>
                            <td v-if="ejzbMap.erIsDfZb == '0'" :rowspan="ejzbMap.errs">
                              {{ejzbMap.erkfyy}} <!--扣分原因 -->
                            </td>
                            <td v-else>
                              {{sjzbMap.sjkfyy}} <!--扣分原因 -->
                            </td>
                            <td style="white-space: pre-wrap;">{{sjzbMap.sjbz}}</td>
                            <td>
                              <dict-tag :options="dict.type.zrs_zb_checkdate" :value="sjzbMap.sjKhzq"/>
                            </td>
                          </tr>
                        </template>
                        <template v-else>
                          <tr>
                            <td style="text-align: left;">{{sjzbMap.sjzbmc}}
                            </td>
                            <td v-if="ejzbMap.erIsDfZb == '1'">{{sjzbMap.sjfz}}</td>
                            <td v-if="ejzbMap.erIsDfZb == '1'">
                              {{sjzbMap.sjsdf}} <!--分数为百分制 -->
                            </td>
                            <td v-if="ejzbMap.erIsDfZb == '1'">
                              {{sjzbMap.sjkfyy}} <!--扣分原因 -->
                            </td>
                            <td style="white-space: pre-wrap;">{{sjzbMap.sjbz}}</td>
                            <td>
                              <dict-tag :options="dict.type.zrs_zb_checkdate" :value="sjzbMap.sjKhzq"/>
                            </td>
                          </tr>
                        </template>

                        <template v-if="(j+1) == ejzbMap.sjzbList.length && ejzbMap.erbz ">
                          <tr><td :colspan="4">{{ejzbMap.erbz}}</td></tr>
                        </template>
                      </template>
                  </template>
                </template>
                <!-- 一级指标的备注部分 -->
                <template v-if="zrsGoalZbMap.yjbz">
                  <tr>
                    <td colspan="7">{{zrsGoalZbMap.yjbz}}</td>
                 </tr>
                </template>
              </template>
            </tbody>
          </table>
        </div>
        <div style="padding-top: 8px;padding-bottom:6px;font-size: 16px;font-weight:bold;text-indent: 4ch;">{{zrsMbManageGoal.remark}}</div>
        <el-upload
          class="upload-demo"
          :ref="'upload'+zrsMbManageGoal.mbGoalId"
          :headers="upload.headers"
          multiple
          :action="upload.url + '?zrsId='+zrsDfInfo.zrsMainId+'&glxId=' + zrsMbManageGoal.mbGoalId"
          :file-list="glxZbData['glx_filelist_'+zrsMbManageGoal.mbGoalId]"
          :auto-upload="false">
          <!--
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload(zrsDfInfo.zrsMainId,zrsMbManageGoal.mbGoalId)">上传到服务器</el-button>
          -->
          <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>
      </div>
      <div style="height: 80px;"></div>
      <div class="footer-container">
          <div class="floating-box">
            <el-button type="primary" @click="close">关闭</el-button>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getZrsDfZbInfo,saveZrsDf,saveZrsDfVeto} from "@/api/business/ZrsDfMain";
import { getToken } from "@/utils/auth";
import request from '@/utils/request'

export default {
  name: "ZrsMbManageGoal",
  dicts: ['zrs_zb_checkdate','sys_yes_no_num'],
  data() {
    return {
      filterMethod(query, item) {
        return item.label.indexOf(query) > -1;
      },
      // 遮罩层
      loading: true,
      isDisabled:false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 目标项管理记录表格数据
      ZrsMbManageGoalList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
        zrsMainId:null,
        mbId: null,
      },
      zrsMainId:null,//打分责任书id
      zrsDfInfo:{"zrsName":''},//模版对象
      glxZbData:[],
      shDeptInfo:[],//打分部门
      fileList:[],
      openZb:false,
      files:[],
      // 附件导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/business/ZrsDfMain/uploads"
      },
    };
  },
  created() {
    const zrsMainId = this.$route.params && this.$route.params.zrsMainId;
    //console.log(tableId);
    if(zrsMainId){
      this.zrsMainId = zrsMainId;
      this.queryParams.zrsMainId = this.zrsMainId;
      //处理业务
      this.getList();
    }else{
      this.close();
      return ;
    }
  },
  methods: {
    /** 关闭按钮 */
    close() {
      let that = this;
      let obj;
      if(that.zrsDfInfo.mbType == '1'){
        obj = { path: "/zrsMain/ZrsDfMainDept", query: { t: Date.now(), pageNum: that.$route.query.pageNum } };
      }else{
        obj = { path: "/zrsMain/ZrsDfMainUser", query: { t: Date.now(), pageNum: that.$route.query.pageNum } };
      }
      this.$tab.closeOpenPage(obj);
    },
    /** 查询目标项管理记录列表 */
    getList() {
      let that = this;
      that.loading = true;
      getZrsDfZbInfo(that.queryParams.zrsMainId).then(response => {
        that.glxZbData = response.data;  //返回的所有数据
        that.ZrsMbManageGoalList = response.data.mbGlxList; //只有管理项数据list
        that.zrsDfInfo = response.data.zrsDfInfo;//查询模版数据
        that.shDeptInfo = response.data.shDeptInfo;
        that.isDisabled = true;
        that.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.mbGoalId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
  }
};
</script>

<style>
  input{
    height: 35px;
    width: 100%;
  }
  .demo-shadow {
      height: 100px;
      width: 50%;
      border: 1px solid #eee;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
  }
  .topDiv{
    padding-top: 40px;
    width: 100%;
    text-align:center;
    font-size: 22px;
  }
  .talbeDiv{
    padding-left: 40px;
    padding-top: 30px;
  }
  .talbeClass{
    border: 1px solid rgba(0,0,0,1);
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 99%;
  }
  .table-bordered{
      /**  border: 1px solid rgba(0,0,0,1);**/
  }
  .table-bordered > thead > tr > th,
  .table-bordered > tbody > tr > th,
  .table-bordered > tfoot > tr > th,
  .table-bordered > thead > tr > td,
  .table-bordered > tbody > tr > td,
  .table-bordered > tfoot > tr > td{
      border: 1px solid rgba(0,0,0,1);
      text-align: center;
      font-weight: bold;
      padding:3px;
  }
  .table-striped > tr:nth-of-type(odd) {
      background-color:#c7c8c8;
  }
  .table_title_center{
      text-align: center;
  }
  .table_title_left{
      text-align: left;
  }
  .table_title_bold{
      font-weight: bold;
  }
  .el-transfer-panel{
    width: 330px;
  }
  .el-transfer-panel__body{
    height: 400px;
  }
  .el-transfer-panel__list{
    height: 400px;
  }
  .el-transfer-panel__list.is-filterable{
    height: 360px;
    padding-top: 0;
  }
  .footer-container {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #f2f2f2;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
    overflow-y: hidden;
    transition: transform 0.3s ease;
    touch-action: pan-y; /* 允许垂直方向上的拖动 */
  }

  .footer-container.open {
    transform: translateY(0%); /* 展开时显示在屏幕上方 */
  }
  .floating-box {
    margin: 0 auto;
    padding: 15px;
    text-align: center;
    background-color: #fff;
    cursor: grab; /* 显示拖动手势 */
  }
</style>
